<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<span v-if="show1">使用v-if指令来指定是否显示DOM,<br/>本例中该DOM将在3秒后消失。</span>
		<div>可以使用template来包装if内层</div>
		<template v-if="show2">
			<p>这里可以好多标签</p>
			<p><span>再来几个</span></p>
		</template>
		
		<p>else指令可选块，必须紧跟在if指令或else-if指令的dom后面，否则不起效果</p>
		<p v-if="show3">3，你要显示的</p>
		<p v-else>你其实是不应该显示的</p>
		
		<p>else-if指令可选块，必须紧跟在if指令或else-if指令的dom后面，否则不起效果</p>
		<p v-if="show4what == 1">你要显示1的</p>
		<p v-else-if="show4what == 2">你要显示2的</p>
		<p v-else-if="show4what == 3">你要显示3的</p>
		<p v-else="">那你要显示什么</p>
		
		<p>这里我们验证if标签尽可能的复用原dom而不是重新渲染</p>
		<template v-if="loginType1 === 'username'">
		  	<label>Username</label>
		  	<input placeholder="Enter your username">
		</template>
		<template v-else>
		  	<label>Email</label>
		  	<input placeholder="Enter your email address">
		</template>
		<button v-on:click="changeLoginType1">切换，但不删除已输入字符串</button>
		
		<p>但是如果你就是要重新渲染，可以为dom指定不同的key值，则该dom将在切换时被重新渲染</p>
		<template v-if="loginType2 === 'username'">
		  	<label>Username</label>
		  	<input placeholder="Enter your username" key="input4username">
		</template>
		<template v-else>
		  	<label>Email</label>
		  	<input placeholder="Enter your email address" key="input4email">
		</template>
		<button v-on:click="changeLoginType2">切换，并且删除已输入字符串</button>
		<p>注意, &lt;label&gt; 元素仍然会被高效地复用，因为它们没有添加 key 属性。</p>
		
		<p>当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。</p>
		
		<p>本例中，心理教育的LI是不会输出的，if指令接收for循环变量row</p>
		<ul>
			<li v-for="row in rows" v-if="row.name != '心理教育'">{{row.name}}</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
var app = new Vue({
	el: '#app',
	data: {
		show1: true,
		show2: true,
		show3: false,
		show4what: 3,
		loginType1: "username",
		loginType2: "username",
		rows: [
			{name: "高等数学"},
			{name: "大学英语"},
			{name: "心理教育"}
		]
	},
	methods: {
		changeLoginType1: function(){
			if(this.loginType1 == "username"){
				this.loginType1 = "email";
			}else{
				this.loginType1 = "username";
			}
		},
		changeLoginType2: function(){
			if(this.loginType2 == "username"){
				this.loginType2 = "email";
			}else{
				this.loginType2 = "username";
			}
		}
	}
});
</script>
</html>
